<template>
  <div>
    <Card style="margin-bottom:20px;">
      <Form :model="superviseForm" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.workStatus" placeholder="工作状态" clearable>
                <Option v-for="item in workStatusList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workPlanRange" type="daterange" placeholder="工作计划时间段" :editable="false"
                style="width:100%" @on-change="changeWorkPlanRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.workEndRange" type="daterange" placeholder="工作完成时间段" :editable="false"
                style="width:100%" @on-change="changeWorkEndRange"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="发起人姓名" v-model="superviseForm.startName" />
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Input placeholder="联系地址" v-model="superviseForm.postaladdress" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.shouldPayRange" type="daterange" placeholder="工作录入时间段" :editable="false"
                style="width:100%" @on-change="changeShouldPayRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="24">
            <Button type="primary" @click="handleSubmit()" style="margin-right:20px" :loading="queryLoading">查询</Button>
            <Button @click="handleReset()">重置</Button>
          </i-col>
        </Row>
      </Form>
    </Card>
    <Card>
      <div class="content">
        <Button :type="but[0]" @click="clickButton(0)">全部</Button>
        <Button :type="but[1]" @click="clickButton(1)">即将超时</Button>
        <Button :type="but[2]" @click="clickButton(2)">已超时</Button>
      </div>
      <Table :columns="chargeColumns" :data="chargeData" @on-selection-change="selectionChange"
        :row-class-name="rowClassName">
        <template slot-scope="{row}" slot="contno">
          <span v-if="row.contno == ''">-</span>
          <span v-else>{{ row.contno }}</span>
        </template>
        <template slot-scope="{row}" slot="appntname">
          <span v-if="row.appntname == ''">-</span>
          <span v-else>{{ row.appntname }}</span>
        </template>
        <template slot-scope="{row}" slot="planstatename">
          <span v-if="row.planstatename == '未服务'">
            <Button style="border-radius: 16px;background-color:rgb(255,141,26);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '服务中'">
            <Button style="border-radius: 16px;background-color:rgb(24,144,255);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
          <span v-if="row.planstatename == '已完成'">
            <Button style="border-radius: 16px;background-color:rgb(67,207,124);color:#fff" size="small"
              @click="forward(row)">{{ row.planstatename }}</Button>
          </span>
        </template>
        <template slot-scope="{row}" slot="contStatus">
          <span v-if="row.contStatus == '失效中'" style="color: rgba(255, 141, 26, 1);">
            <span class="circle" style="background-color: rgba(255, 141, 26, 1);margin-right:5px"></span>
            {{ row.contStatus }}
          </span>
          <span v-if="row.contStatus == '终止'" style="color: rgba(166, 166, 166, 1);">
            <span class="circle" style="background-color: rgba(166, 166, 166, 1);margin-right:5px"></span>
            {{ row.contStatus }}
          </span>
          <span v-if="row.contStatus == '已复效'" style="color: rgba(67, 207, 124, 1);">
            <span class="circle" style="background-color: rgba(67, 207, 124, 1);margin-right:5px"></span>
            {{ row.contStatus }}
          </span>
        </template>
      </Table>
      <Page :total="total" show-sizer show-total style="text-align:right;margin-top:20px" @on-change="pageChange"
        @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeOptions" :current="pageIndex" :page-size="pageSize"
        transfer></Page>
    </Card>
    <div class="contain" ref="mybox">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas" style="position: absolute;"></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import { drawSign } from '../../../util/drawSign';
export default {
  data() {
    return {
      superviseForm: {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        startName: "",
        postaladdress: "",
        shouldPayRange: ["", ""]
      },
      //本月交费完成
      monthPaid: "0",
      //工作状态下拉框
      workStatusList: [
        {
          key: "0",
          value: "未服务"
        },
        {
          key: "1",
          value: "服务中"
        },
        {
          key: "2",
          value: "已完成"
        }
      ],
      //销售渠道下拉框
      saleChannelList: [
        {
          key: "0",
          value: "个险"
        },
        {
          key: "1",
          value: "银保"
        },
        {
          key: "2",
          value: "网销"
        },
        {
          key: "3",
          value: "经代"
        }
      ],
      //年交
      payList: [
        {
          key: "0",
          value: "年交"
        },
        {
          key: "1",
          value: "半年交"
        }
      ],
      //表格
      chargeColumns: [
        {
          type: "selection",
          align: "center",
          fixed: "left",
          width: 60
        },
        {
          title: "计划编号",
          key: "planid",
          width: "200",
          fixed: "left"
        },
        {
          title: "保单号",
          key: "contno",
          width: "200",
          align: "center",
          fixed: "left",
          slot: "contno"
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "150",
          slot: "appntname"
        },
        {
          title: "发起人",
          key: "startPerson",
          align: "center",
          width: "210"
        },
        {
          title: "计划工作时间",
          key: "appointeddate",
          align: "center",
          width: "170"
        },
        {
          title: "工作完成时间",
          key: "fishdate",
          align: "center",
          width: "170"
        },
        {
          title: "剩余处理时间",
          key: "restdays",
          align: "center",
          width: "170"
        },
        {
          title: "工作方式",
          key: "worktypename",
          align: "center",
          minWidth: 140
        },
        {
          title: "工作状态",
          key: "planstatename",
          align: "center",
          width: "150",
          slot: "planstatename",
          fixed: "right"
        }
      ],
      chargeData: [],
      but: ["primary", "default", "default", "default"],
      workTypeList: [
        {
          key: "1",
          value: "短信联系客户"
        },
        {
          key: "2",
          value: "电话联系客户"
        },
        {
          key: "3",
          value: "面访客户"
        }
      ],
      applyStatusList: [
        {
          key: "0",
          value: "失效中"
        },
        {
          key: "1",
          value: "终止"
        },
        {
          key: "2",
          value: "已复效"
        }
      ],
      selection: [],
      selectLength: "0",
      total: "0",
      pageSizeOptions: [5, 10, 15, 20],
      pageIndex: 1,
      pageSize: 10,
      queryLoading: false,
      pageObj: "",
      type: 0,
      flagIndex: 0,
      historyObj: null
    };
  },
  methods: {
    //行样式
    rowClassName(row, index) {
      if (index > 6) return 'table-row-red1';
      else return ''
      // if (row.facerecordflag == '0' && row.planstatename != "已完成") {
      //   return 'table-row-red1';
      // } else if (row.visitflag == '0' && row.planstatename != "已完成") {
      //   return 'table-row-orange1';
      // }
      // return '';
    },

    // 工作计划时间段
    changeWorkPlanRange(date) {
      console.log(date)
      this.superviseForm.workPlanRange = date;
    },

    // 工作完成时间段
    changeWorkEndRange(date) {
      // console.log(date)
      this.superviseForm.workEndRange = date;
    },

    // 工作录入时间段
    changeShouldPayRange(date) {
      // console.log(date)
      this.superviseForm.shouldPayRange = date;
    },

    //点击按钮变绿，其他default
    clickButton(index) {
      let arr = ["default", "default", "default"];
      arr[index] = "primary";
      this.but = arr;
      if (index == 1) {
        index = 6;
      }
      this.flagIndex = index;
      this.handleSubmit(index, 999);
    },

    // 初始化下拉框
    initial() {
      let obj = {
        index: 1,
        initflag: 0,
        pageSize: 10,
        selecttag: 0, // 0是查全部
        selecttype: 3
      };
      this.api.getWorkListForHandover(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.basemap.planstates.length > 0) {
            this.workStatusList = res.data.basemap.planstates;
          }
        }
      });
      this.handleSubmit(0, 999);
    },

    // 重置表单
    handleReset() {
      this.superviseForm = {
        workStatus: "",
        workPlanRange: ["", ""],
        workEndRange: ["", ""],
        startName: "",
        postaladdress: "",
        shouldPayRange: ["", ""]
      };
    },
    //转时间
    timeFormat(time) {
      if (!time) {
        return ''
      }
      let d = new Date(time)
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return y + "-" + m + "-" + day;
    },

    // 表单查询
    handleSubmit(index, params) {
      if (this.historyObj == null) {
        if (index >= 0) {
        } else {
          this.type = 1;
          let arr = ["default", "default", "default"];
          arr[0] = "primary";
          this.but = arr;
          this.queryLoading = true;
        }
        this.pageIndex = 1;
        this.pageSize = 10;
      }

      let obj = {
        planstate: this.superviseForm.workStatus
          ? this.superviseForm.workStatus
          : null,
        rangeminappointeddate: this.superviseForm.workPlanRange[0] ? this.timeFormat(this.superviseForm.workPlanRange[0]) : null,
        rangemaxappointeddate: this.superviseForm.workPlanRange[1] ? this.timeFormat(this.superviseForm.workPlanRange[1]) : null,
        rangeminfishdate: this.superviseForm.workEndRange[0] ? this.timeFormat(this.superviseForm.workEndRange[0]) : null,
        rangemaxfishdate: this.superviseForm.workEndRange[1] ? this.timeFormat(this.superviseForm.workEndRange[1]) : null,
        rangeminControllerDate: this.superviseForm.shouldPayRange[0] ? this.timeFormat(this.superviseForm.shouldPayRange[0]) : null,
        rangemaxControllerDate: this.superviseForm.shouldPayRange[1] ? this.timeFormat(this.superviseForm.shouldPayRange[1]) : null,
        originatorname: this.superviseForm.startName
          ? this.superviseForm.startName
          : null,
        index: this.pageIndex,
        initflag: 1,
        pageSize: this.pageSize,
        selecttag: this.flagIndex, // 0是查全部
        selecttype: 3, // 交办
        postaladdress: this.superviseForm.postaladdress
          ? this.superviseForm.postaladdress
          : null,
        initqueryflag: params == 999 ? 0 : null,
        type: this.type
      };
      this.pageObj = obj;
      this.api.getWorkListForHandover(obj).then(res => {
        res.data = {
          "workbar": null,
          "basemap": null,
          "ipage": {
            "records": [
              {
                "planid": "1605400575410814978",
                "contno": "0002027422951813",
                "appntid": "0000952181",
                "appntname": "投一农号",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2022-12-22 00:00:00",
                "fishdate": null,
                "restdays": -254,
                "worktype": "2",
                "worktypename": "网络联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1605400575440175106",
                "agentcode": "8601010114",
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1605400575201099778",
                "contno": "0002153722301813",
                "appntid": "0000970274",
                "appntname": "投一农号",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2022-12-22 00:00:00",
                "fishdate": null,
                "restdays": -254,
                "worktype": "2",
                "worktypename": "网络联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1605400575234654210",
                "agentcode": "8601010114",
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1605385246806761473",
                "contno": "0002153722301813",
                "appntid": "0000970274",
                "appntname": "投一农号",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2022-12-22 00:00:00",
                "fishdate": null,
                "restdays": -254,
                "worktype": "5",
                "worktypename": "电话联系客户",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1605385246836121601",
                "agentcode": "8601010114",
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1605447073087471618",
                "contno": "0002153722301813",
                "appntid": "0000970274",
                "appntname": "投一农号",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2022-12-23 00:00:00",
                "fishdate": null,
                "restdays": -253,
                "worktype": "2",
                "worktypename": "网络联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1605447073133608962",
                "agentcode": "8601010114",
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1605400742990036994",
                "contno": "0002153722301813",
                "appntid": "0000970274",
                "appntname": "投一农号",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2022-12-23 00:00:00",
                "fishdate": null,
                "restdays": -253,
                "worktype": "2",
                "worktypename": "网络联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1605400743023591425",
                "agentcode": "8601010114",
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1607255037347639297",
                "contno": "0005041720251888",
                "appntid": "0000948375",
                "appntname": "续八",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2022-12-26 00:00:00",
                "fishdate": null,
                "restdays": -250,
                "worktype": "0",
                "worktypename": "短信联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1607255037385388033",
                "agentcode": "61003220",
                "remark": "4324234",
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1620959154582704130",
                "contno": "c",
                "appntid": null,
                "appntname": null,
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2023-02-02 00:00:00",
                "fishdate": null,
                "restdays": -212,
                "worktype": "0",
                "worktypename": "短信联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1620959154687561730",
                "agentcode": null,
                "remark": "zxx",
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1622463285176573953",
                "contno": null,
                "appntid": null,
                "appntname": null,
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2023-02-06 00:00:00",
                "fishdate": null,
                "restdays": -208,
                "worktype": "2",
                "worktypename": "网络联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1622463285231099906",
                "agentcode": null,
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1638807683560722434",
                "contno": "0000668122661818",
                "appntid": "0001040456",
                "appntname": "刘冬冬",
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2023-03-23 00:00:00",
                "fishdate": null,
                "restdays": -163,
                "worktype": "1",
                "worktypename": "电话联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1638807683590082561",
                "agentcode": "8601010114",
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              },
              {
                "planid": "1655753775527231489",
                "contno": "0004252520471888",
                "appntid": null,
                "appntname": null,
                "originator": "860100003",
                "originatorname": "奚续收",
                "appointeddate": "2023-05-09 00:00:00",
                "fishdate": null,
                "restdays": -116,
                "worktype": "0",
                "worktypename": "短信联系业务员",
                "planstate": "0",
                "planstatename": "未服务",
                "workid": "1655753775548203010",
                "agentcode": null,
                "remark": null,
                "visitflag": "0",
                "facerecordflag": "0"
              }
            ],
            "total": "10",
            "size": "10",
            "current": "1",
            "orders": [],
            "searchCount": true,
            "pages": "1"
          }
        }
        if (res.code == 200 && res.data != null) {
          this.queryLoading = false;
          this.historyObj = null;
          if (res.data.ipage && res.data.ipage.total > 0) {
            this.total = res.data.ipage.total;
            this.chargeData = res.data.ipage.records;
            if (params != 999) {
              this.$Message.info("查询成功");
            }
            this.chargeData.forEach(element => {
              if (element.originatorname && element.originator) {
                element.startPerson =
                  element.originatorname + "-" + element.originator;
              }
              if (element.appointeddate) {
                element.appointeddate = element.appointeddate.substr(0, 10);
              }
              if (element.fishdate) {
                element.fishdate = element.fishdate.substr(0, 10);
              }
            });
          } else {
            this.total = 0;
            this.chargeData = [];
            if (params != 999) {
              this.$Message.info("查询数据为空");
            }
          }
        } else {
          this.queryLoading = false;
          this.total = 0;
          this.chargeData = [];
          if (params != 999) {
            this.$Message.info(res.msg);
          }
        }
      });
    },

    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.getWorkListForHandover(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.queryLoading = false;
          if (res.data.ipage && res.data.ipage.total > 0) {
            this.total = res.data.ipage.total;
            this.chargeData = res.data.ipage.records;
            this.chargeData.forEach(element => {
              if (element.originatorname && element.originator) {
                element.startPerson =
                  element.originatorname + "-" + element.originator;
              }
              if (element.appointeddate) {
                element.appointeddate = element.appointeddate.substr(0, 10);
              }
              if (element.fishdate) {
                element.fishdate = element.fishdate.substr(0, 10);
              }
            });
          } else {
            this.total = 0;
            this.chargeData = [];
            if (params != 999) {
              this.$Message.info("查询数据为空");
            }
          }
        } else {
          this.queryLoading = false;
          this.total = 0;
          this.chargeData = [];
          if (params != 999) {
            this.$Message.info(res.msg);
          }
        }
      });
    },

    // 表格多选获取数据
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },

    // 工作状态跳转
    forward(row) {
      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE", "交办件");
      if (row.planstatename == "已完成") {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            row: row,
            insuranceType: "assign"
          }
        });
      } else {
        this.$router.push({
          name: "ServiceDetail",
          query: {
            selection: row,
            insuranceType: "assign"
          }
        });
      }
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime)
      document.getElementsByClassName("ivu-table-fixed-body")[6].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[6].classList.add("add-background")

      document.getElementsByClassName("ivu-table-fixed-body")[7].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[7].classList.add("add-background")

      document.getElementsByClassName("ivu-table-body")[3].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-body")[3].classList.add("add-background")
    },
  },
  created() {
    if (sessionStorage.getItem("INSURANCE_TYPE") == "交办件") {
      if (sessionStorage.getItem("QUERYOBJ")) {
        // 二次筛选条件
        this.historyObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
        this.type = this.historyObj.type;
        this.flagIndex = this.historyObj.selecttag;
        let arr = ["default", "default", "default"];
        arr[this.flagIndex] = "primary";
        this.but = arr;
        this.pageIndex = this.historyObj.index;
        this.pageSize = this.historyObj.pageSize;

        // 单次查询条件
        this.superviseForm = JSON.parse(sessionStorage.getItem("QUERYFORM"));

        // 工作录入时间段
        this.superviseForm.shouldPayRange[0] = this.historyObj.rangeminControllerDate;
        this.superviseForm.shouldPayRange[1] = this.historyObj.rangemaxControllerDate;
        // 工作计划时间段
        this.superviseForm.workPlanRange[0] = this.historyObj.rangeminappointeddate;
        this.superviseForm.workPlanRange[1] = this.historyObj.rangemaxappointeddate;
        // 工作完成时间段
        this.superviseForm.workEndRange[0] = this.historyObj.rangeminfishdate;
        this.superviseForm.workEndRange[1] = this.historyObj.rangemaxfishdate;
        // console.log(this.historyObj, this.superviseForm);

        sessionStorage.removeItem("QUERYOBJ");
        sessionStorage.removeItem("QUERYFORM");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted() {
    this.initial();
    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      (new Date().getDate());
    this.draw(this.$refs.myCanvas, loginUser, loginTime)
  },
  beforeDestroy() {
    this.chargeData = [];
  }
};
</script>
<style lang="less">
@import "./index";

.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>
